<template>
  <div>
    <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formData"
      @finish="handleSearch">
      <a-row :gutter="24">
        <template v-for="(field, index) in fields" :key="field.prop">
          <a-col v-show="isExpanded || index < maxFirstRowItems" :span="8">
            <a-form-item :name="field.prop" :label="field.label">
              <!-- 选择器 -->
              <a-select v-if="field.type === 'select'" v-model:value="formData[field.prop]"
                :placeholder="field.placeholder || '请选择'" allow-clear>
                <a-select-option v-for="option in field.options" :key="option.value" :value="option.value">
                  {{ option.label }}
                </a-select-option>
              </a-select>

              <!-- 输入框 -->
              <a-input v-else-if="field.type === 'input'" v-model:value="formData[field.prop]"
                :placeholder="field.placeholder || '请输入'" allow-clear />

              <!-- 日期范围选择器 -->
              <a-range-picker v-else-if="field.type === 'daterange'" v-model:value="formData[field.prop]"
                format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            </a-form-item>
          </a-col>
        </template>
      </a-row>
      <a-row>
        <a-col :span="24" style="text-align: right">
          <a-button type="primary" html-type="submit" :loading="loading">
            搜索
          </a-button>
          <a-button style="margin: 0 8px" @click="handleReset">
            重置
          </a-button>
          <a v-if="hasExpandableFields" style="font-size: 12px" @click="toggleExpand">
            <template v-if="isExpanded">
              <UpOutlined />
            </template>
            <template v-else>
              <DownOutlined />
            </template>
            {{ isExpanded ? '收起' : '展开' }}
          </a>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue'

// Props
const props = defineProps({
  // 表单数据
  searchForm: {
    type: Object,
    default: () => ({})
  },
  // 表单字段配置
  searchFields: {
    type: Array,
    default: () => []
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  },
  // 第一行最大显示项数
  maxFirstRowItems: {
    type: Number,
    default: 6
  }
})

// Emits
const emit = defineEmits(['search', 'reset'])

// 响应式数据
const isExpanded = ref(false)
const formRef = ref()
const formData = ref({ ...props.searchForm })

// 监听外部表单数据变化
watch(
  () => props.searchForm,
  (newVal) => {
    formData.value = { ...newVal }
  },
  { deep: true }
)

// 计算属性
const fields = computed(() => {
  return props.searchFields
})

const hasExpandableFields = computed(() => {
  return props.searchFields.length > props.maxFirstRowItems
})

// 方法
const handleSearch = () => {
  emit('search', formData.value)
}

const handleReset = () => {
  formRef.value?.resetFields()
  // 重置表单数据
  const resetData = {}
  props.searchFields.forEach(field => {
    resetData[field.prop] = field.type === 'daterange' ? [] : ''
  })
  formData.value = resetData
  emit('reset', resetData)
}

const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}
</script>

<style scoped>
.ant-advanced-search-form {
  max-width: none;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 2px 0 8px #f5f5f5;
  margin-bottom: 16px;
}

[data-theme='dark'] .ant-advanced-search-form {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #434343;
  padding: 24px;
  border-radius: 2px;
}
</style>